import { ProColumnType } from '@ant-design/pro-table';
import GenernalFormItem from '@/components/GenernalFormItem';
import ProForm, { ProFormProps, FormInstance } from '@ant-design/pro-form';
import { Collapse } from 'antd';
import styles from './index.scss';

interface AdvanceSearchProps<T> {
    columns: ProColumnType<T>[];
    otherColumns?: ProColumnType<T>[];
    renderHeader: () => React.ReactNode;
    collapse: boolean;
    formProps?: ProFormProps;
    form?: FormInstance;
}

export default function AdvanceSearch<T>(props: AdvanceSearchProps<T>) {
    const [form] = ProForm.useForm(props.form);

    return (
        <Collapse
            activeKey={props.collapse ? 1 : undefined}
            collapsible="disabled"
            ghost
            className={styles.collapse}
        >
            <Collapse.Panel
                className={styles.collapsePanel}
                showArrow={false}
                header={props.renderHeader()}
                key={1}
            >
                <GenernalFormItem
                    form={form}
                    formProps={{
                        submitter: {
                            searchConfig: {
                                submitText: '查询',
                                resetText: '重置',
                            },
                            render: (props, dom) => dom.reverse(),
                        },
                        ...props.formProps,
                    }}
                    columns={[...props.columns, ...(props.otherColumns ?? [])]}
                />
            </Collapse.Panel>
        </Collapse>
    );
}
